{% load static %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css' %}">
    <style>
        .register-box{
            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;
            width: 500px;
            border: 2px solid #ddd;
            border-radius: 5px;
            padding: 0px 30px 30px 30px;
        }
        .register-box h1{
            text-align: center;
        }
    </style>
</head>

<body>
<div class="register-box">
    <h1>用户注册</h1>
    <form method="post" action="/register/">
        {% csrf_token %}
        <div class="input-group mb-3">
            <span class="input-group-text" id="">@</span>
            <input type="text" name="username" class="form-control" placeholder="用户名" aria-label="Username"
                   aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <input type="password" name="password" class="form-control" placeholder="密码" aria-label="Password"
                   aria-describedby="basic-addon2">
            <span class="input-group-text" id="basic-addon2">必须含有A~Z,a~z,0~9</span>
        </div>
        <div class="input-group mb-3">
            <span class="input-group-text" id="country-code">+86</span>
            <input type="text" name="mobile" class="form-control" placeholder="电话号码" aria-label="Mobile"
                   aria-describedby="basic-addon1">
        </div>
        <a href="/login" class="btn btn-outline-secondary">登录</a>
        <button type="submit" class="btn btn-outline-success">注册</button>
    </form>
</div>


<script src="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.js' %}"></script>
</body>
</html>